/* 引入 antd 样式变量， 有利于保持页面的一致性，也方便实现定制主题 */
/* 样式文件默认使用 CSS Modules */
@import "~antd/lib/style/themes/default.less";

// demo1: 局部作用域
.title {
  color: @blue-6; // 引入 antd 中的变量
  // color: red; // 自定义 css
}
.content {
  font-size: @font-size-sm;
  color: @success-color;
}

// demo2: 全局作用域, 在 React 中以普通 css 的形式使用， 即: className="demo-title"
:global(.demo-title) {
  color: purple;
  font-size: 18px;
}

//demo3: Class 的组合: 一个选择器可以继承另一个选择器的规则，这称为"组合"（"composition"）。
.testA {
  background-color: yellow;
}

.testB {
  composes: testA;
  font-size: 18px;
  margin-top: 10px;
  color: red;
}
// 覆盖 Antd 的 CSS:
// 1. 引入的 antd 组件类名没有被 CSS Module 转化，所以被覆盖的类名 .ant-select-selection 必须放到 :global 中。
// 2. 因为上一条的关系，覆盖是全局性的，为了防止对其他 Select 造成影响，可以给组件添加 className，
// 只对这类组件进行覆盖，也可以利用外层类名实现这种限制。
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

.baseBg {
  background-color: #fff;
  // color: red;
}

.fancyBorder {
  border: 1px solid #eee;
}

.testSplit {
  color: #eee;
  .testLeft {
    background-color: blue;
  }
  .testRight {
    background-color: paleturquoise;
  }
}
